<template>
  <el-card>
    <el-form label-width="80px" :model="model" :rules="rules" ref="formRef">
      <el-row :gutter="10">
        <el-col
          v-for="formItem in schema"
          :key="formItem.key"
          :span="formItem.colSpan || 24"
        >
          <el-form-item :label="formItem.label" :prop="formItem.dataKey">
            <slot v-if="formItem.type === 'slot'" :name="formItem.slot" />
            <div
              v-if="formItem.type === 'QuillEditor'"
              v-bind="formItem.props || {}"
            >
              <QuillEditor theme="snow" />
            </div>
            <div
              v-if="formItem.type === 'Editor'"
              v-bind="formItem.props || {}"
            >
              <Editor
                api-key="no-api-key"
                :init="{
                  plugins: 'lists link image table code help wordcount',
                }"
              />
            </div>
            <component
              v-else
              :is="formItem.type"
              v-bind="formItem.props || {}"
              v-model="model[formItem.dataKey]"
            >
              <el-option
                v-if="formItem.children"
                v-for="option in formItem.children"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </component>
            <!-- <el-input
          v-if="formItem.type === 'el-input'"
          :placeholder="formItem.placeholder"
        ></el-input> -->
            <!-- <el-inputs -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import Editor from "@tinymce/tinymce-vue";

defineOptions({
  name: "XForm",
});

/*
  [
    {
      type: 'el-input',
      label: 'Sku名称',
      props: {
        placeholder: '请输入sku名称',
        class: 'xxx'
      },
      dataKey: 'skuName',
      key: 'skuName'
    }
  ]
*/

defineProps<{
  schema: any[];
  model: any;
  rules: any;
}>();

const emit = defineEmits(["validateSuccess"]);

import { ref } from "vue";

const formRef = ref();

const submit = async () => {
  await formRef.value.validate();
  emit("validateSuccess");
};
</script>

<style scoped lang="scss"></style>
